<script>
import axios from "axios";
export default {
  name: "App",
  data(){
    return {
      userInfo:null
    }
  },
  methods:{
    loginHandler(){
      const username = this.$refs.username.value.trim();
      const password = this.$refs.password.value.trim();
      axios.post('/api/login',{
          username,
          password
      }).then(value => {
        const {data} = value;
        if(data.ok === 1){
          this.userInfo = data.userInfo;
        }else {
          alert(data.msg);
          this.$refs.username.value='';
          this.$refs.password.value='';
        }
      })
    }
  }
}
</script>

<template>
  <div v-if="userInfo">
    <p>账号：{{userInfo.username}}</p>
    <p>密码：{{userInfo.password}}</p>
    <p>性别：{{userInfo.sex}}</p>
    <p>年龄：{{userInfo.age}}</p>
    <p>爱好：{{userInfo.hobby}}</p>
  </div>
  <form v-else>
    <p>账号：<input ref="username" type="text"></p>
    <p>密码：<input ref="password" type="password"></p>
    <button @click.prevent="loginHandler">登陆</button>
  </form>
</template>

<style scoped>

</style>
